<template>
  <div>
    <table>
      <tr v-for="(i,index) in list1" :key="i">
        <td> <van-field :label="i.label" v-model="names[index]" /> </td>
        <td>
          <select  id="" v-model="typevalues[index]">
            <option value="input"> 输入框 </option>
            <option value="radio"> 单选框 </option>
            <option value="checkbox"> 多选框 </option>
            <option value="select"> 下拉框 </option>
            <option value="datetime"> 日期 </option>
            <option value="file"> 上传文件爱 </option>
          </select>
        </td>
        <td>
          <van-field label="值" v-model="values[index]"/>
          <van-button @click="getsource(index)">选择数据源</van-button>
        </td>
      </tr>
    </table>
    <van-button @click="add">+</van-button>
    <van-button @click="submit">提交</van-button>

    <el-dialog v-model="dialogTableVisible" title="Shipping address">
      <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          style="width: 100%"
          @current-change="handleCurrentChange"
      >
        <el-table-column type="index" width="50" />

        <el-table-column property="name" label="Name" width="120" />

      </el-table>

    </el-dialog>
  </div>
</template>

<script>
import myaxios from 'axios'
export default {
  name: "sty",
  data(){
    return{
      list1:[{'label':'名称'}],
      names:{},
      values:{},
      typevalues:{},
      gridData:[{'id': 1, 'name': '请假类型数据源'}, {'id':2,'name':'会议地址数据源'}],
      tableData:[],
      id:this.$route.query.id,
      dialogTableVisible:false

    }
  },
  methods:{
    add(){
      this.list1.push({'label':'名称'})
    },
    submit(){
      // 获取所有的值
      let list=[]
      for (var i=0; i<this.list1.length; i++){
        let dict = {'lable': this.names[i], 'type':this.typevalues[i], 'values': this.values[i]}
        list.push(dict)
      }
      console.log(list)
    },
    getsource(index){
      localStorage.setItem('index', index)
      myaxios({url:'http://127.0.0.1:5000/getresourcedata', method:'get'})
          .then(res=>{
            this.tableData = res.data.list
          })
      this.dialogTableVisible=true
    },
    handleCurrentChange(val){
      this.dialogTableVisible=false
      let index = localStorage.getItem('index')
      this.values[index] = JSON.stringify(val['mes'])
    }
  }
}
</script>

<style scoped>

</style>